<template>
  <div>
    <div class="serp-box-con">
      <div class="serp-title">
        <div class="title-text">公园列表</div>
        <div class="hide">
          <el-switch v-model="showOrHide">
          </el-switch>
        </div>
      </div>
      <div id="serpBox" v-show="showOrHide && showOrHide1">
        <div id="serp" class="anim-up">
          <div class="serp-body">
            <el-empty v-show="!partList" :image-size="200"></el-empty>
            <ul v-show="partList" >
              <li
                v-for="(p, index) in partList"
                :key="p.id"
                @click="partClick(index)"
              >
                <div class="poi-imgbox">
                  <img
                    class="poi-img"
                    :src="p.photos ? p.photos[0].url : 'http://a.amap.com/jsapi_demos/static/images/search-img-default.png'"
                  />
                </div>
                <div class="poi-info-left">
                  <h3 class="poi-title">{{ p.name }}</h3>
                  <div class="poi-info">{{ p.address }}</div>
                  <div>
                    <el-rate
                      :value="parseFloat(p.rating)"
                      disabled
                      allow-half
                      show-score
                      text-color="#ff9900"
                    >
                    </el-rate>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showOrHide: true,
      showOrHide1:true,
    };
  },
  props: ["click", "partList"],
  watch:{
    partList(n){
        this.showOrHide1 = false;
        setTimeout(()=>{
           this.showOrHide1 = true;
        },3500)
       
    }
  },
  methods: {
    partClick(e) {
      this.click(e);
    },
  },
};
</script>

<style lang="less" scoped>
.serp-box-con {
  position: fixed;
  top: 15px;
  left: 15px;
  font-size: 12px;
  line-height: 1.5;
  color: #565656;
  word-wrap: break-word;
  width: 360px;
  box-sizing: border-box;
  z-index: 5000;
  border-radius: 3px;
  overflow: hidden;
  border-top: 1px solid #fff;
  // box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.15);
  .serp-title {
    padding: 0 10px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    .title-text {
      font-size: 16px;
      font-weight: 500;
      padding: 5px;
    }
  }
  #serpBox {
    width: 100%;
    overflow: hidden;

    #serp::-webkit-scrollbar {
      display: none;
    }
    #serp {
      background: #fff;
      position: relative;
      border-radius: 3px;
      max-height: 479px;
      user-select: none;
      overflow: scroll;
      scrollbar-width: none;
      -ms-overflow-style: none;
      .serp-body {
        padding: 0 15px;
        ul {
          list-style: none;
          margin: 0;
          padding: 0;
          li:hover {
            background-color: #fafafa;
          }
          li {
            display: list-item;
            text-align: -webkit-match-parent;
            position: relative;
            border-top: 1px solid #eaeaea;
            padding: 10px 0;
            cursor: pointer;
            .poi-imgbox {
              width: 100px;
              height: 74px;
              vertical-align: top;
              float: right;
              margin: 0 8px;
              overflow: hidden;
              .poi-img {
                display: inline-block;
                width: 100%;
                height: 100%;
                background-size: cover;
                background-position: 50%;
              }
            }
            .poi-info-left {
              max-width: 320px;
              padding-left: 8px;
            }
          }
        }
      }
    }
  }
}

.anim-up {
  -webkit-animation-name: layui-up;
  animation-name: layui-up;
  -webkit-animation-duration: 0.5s;
  -webkit-animation-fill-mode: both;
  animation-duration: 0.5s;
  animation-fill-mode: both;
}
@-webkit-keyframes layui-up {
  from {
    -webkit-transform: translateY(100%);
    opacity: 0.3;
  }
  to {
    -webkit-transform: translateY(0);
    opacity: 1;
  }
}
@keyframes layui-up {
  from {
    transform: translateY(-100%);
    opacity: 0.3;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}


</style>